@model DanaZhangCms.Models.Product
@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_SysLayout.cshtml";
    List<SelectListItem> parentList = ViewBag.CategoryList;
}
<form class="layui-form" action="@(Model.Id<1? Url.Action("Add"):Url.Action("Edit"))">
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    <div class="layui-form-item">

        @Html.LabelFor(model => model.Name, new { @class = "layui-form-label" })
        <div class="layui-input-inline">
            @Html.TextBoxFor(model => model.Name, new { @class = "layui-input", @required = "", @lay_verify = "required", autocomplete = "off" })

        </div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>

        </div>
    </div>
    <div class="layui-form-item">
        @Html.LabelFor(model => model.CategoryId, new { @class = "layui-form-label" })
        <div class="layui-input-inline">

            @Html.DropDownListFor(model => model.CategoryId, parentList, "--请选择--", new { @class = "valid" })
        </div>
    </div>

    <div class="layui-form-item">

        @Html.LabelFor(model => model.ImgUrl, new { @class = "layui-form-label" })
        <div class="layui-input-inline">
            <div class="uploadPreview">
                @if (!string.IsNullOrEmpty(Model.ImgUrl))
                {
                    <img src="@Model.ImgUrl" />
                }
                else
                {
                    @:暂无图片
                }
            </div>
            <div class="left">
                <div class="uploadProgressBar"></div>
                <div class="uploadBut">选择图片</div>
            </div>
            <div class="clear"></div>
        </div>
        @Html.HiddenFor(x => x.ImgUrl)

    </div>
    <div class="layui-form-mid layui-word-aux">
        <span class="x-red"></span>

    </div>

    <div class="layui-form-item">

        @Html.LabelFor(model => model.SortId, new { @class = "layui-form-label" })
        <div class="layui-input-inline">
            @Html.TextBoxFor(model => model.SortId, new { @class = "layui-input", @required = "", @lay_verify = "required", autocomplete = "off" })

        </div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>

        </div>
    </div>

    <div class="layui-form-item">

        @Html.LabelFor(model => model.Content, new { @class = "layui-form-label" })
        <div class="layui-input-inline" style="width:600px;min-height:500px;">
            @Html.TextAreaFor(model => model.Content, new { @class = "", autocomplete = "off", rows = "30" })

        </div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>

        </div>
    </div>

    <div class="layui-form-item">
        <label for="L_repass" class="layui-form-label">
        </label>
        <button class="layui-btn" lay-filter="add" lay-submit="">
            保存
        </button>
    </div>
</form>
@section Scripts{

    <style>
        .ck-content {
            max-height: 400px;
            height: 400px;
        }
    </style>

    <link type="text/css" rel="stylesheet" href="/lib/webuploader/webuploader.css" />
    <script type="text/javascript" src="/lib/webuploader/webuploader.js"></script>
    <script src="/lib/ckeditor/translations/zh-cn.js"></script>
    <script src="/lib/ckeditor/ckeditor.js"></script>
    <script>
            var editor;

        $(function () {
           ClassicEditor
        .create( document.querySelector( '#Content' ) , {
        language: 'zh-cn',
        height:500,
         ckfinder: {
                      uploadUrl : '/Tool/Upload'//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                   }


    } )
    .then( newEditor => {
        editor = newEditor;//editor.getData();取值
    } )
        .catch( error => {
            console.error( error );
        } );


  var uploader = WebUploader.create({
                pick: '.uploadBut',
                auto: true,
                swf: '/lib/webuploader/Uploader.swf',
                server: '/tool/upload?operation=bimage',
                fileVal: 'upload',
                accept: {
                    title: 'Images',
                    mimeTypes: 'image/*'
                },

            });

            uploader.on('uploadProgress', function (file, percentage) {
                $(".uploadPreview").html("上传中...");
            });

            uploader.on('uploadSuccess', function (file, response) {
                var data = eval("(" + response._raw + ")");;
                if (!data.uploaded) {
                    $(".uploadPreview").html(data.url);
                }

                else {
                    $(".uploadPreview").html("<img src=\"" + data.url + "\"  />");
                    $("#ImgUrl").val(data.url);
                }
            });

            uploader.on('uploadError', function (file) {
                $(".uploadPreview").html("上传失败");
            });


            layui.use('form', function () {
                var form = layui.form;


                form.on('submit(add)', function (data) {
                    var url = $(".layui-form").attr("action");
                     debugger;
                    // data.field.Content=editor.getData();
                    $("#Content").val(editor.getData());
                    $.ajax({
                        url: url,
                        data: $("form").serialize(),
                        type:"post",
                        success: function (rep) {
                            if (rep.success == true) {
                                layer.msg(rep.msg,function(){

                                    window.location.href='@(Url.Action("Index"))';
                                });
                    }
                    else {
                                layer.alert(rep.msg, { icon: 5 });
                    }

                        },
                        error: function () {
                            layer.alert("网络错误，请稍候再试。", { icon: 5 });
                        }
                    });


                    return false;
                });
            });
        })


    </script>
}